<script setup>
import { Modal } from 'ant-design-vue'
import { ArrowLeftOutlined, CaretDownFilled, CheckCircleOutlined, CopyOutlined, DeleteOutlined, DoubleRightOutlined, DownOutlined, EditOutlined, EyeOutlined, KeyOutlined, LockOutlined, PlusOutlined, ReloadOutlined, SearchOutlined, SettingOutlined, UndoOutlined, UnlockOutlined, UpOutlined } from '@ant-design/icons-vue'
import Clipboard from 'vue-clipboard3'
import { addMobile, addMobileRule, copyMobile, deleteMobile, deleteMobileRule, editMobile, getMobileDetail, getMobileList, getMobileRule, getModuleList } from '~@/api/config/index'
import { getMerchantList } from '~@/api/card/index'

defineOptions({
  name: 'MobilePay',
})
const notification = useNotification()
const { toClipboard } = Clipboard()
// 新增渠道
const channelForm = ref()
const passForm = ref()
const addForm = ref()

const userTitle = shallowRef('')
const chooseItem = shallowRef('')
const merchantloading = shallowRef(false)
const detailOpen = ref(false)

const addOpen = ref(false)
const detailInfo = ref({})
const addDetail = ref({})

const channelOpen = ref(false)
const ruleOpen = ref(false)
const allocateLoading = ref(false)
const confirmLoading = ref(false)
const rules = computed(() => {
  return {
    appId: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    // channelPartner: [
    //   { required: true, message: '必填字段', trigger: 'change' },
    // ],
    channel: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    channelName: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    // channelAppId: [
    //   { required: true, message: '必填字段', trigger: 'change' },
    // ],

  }
})
const passRules = computed(() => {
  return {
    signType: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    md5Key: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    rsaPublicKey: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    rsaPrivateKey: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],

  }
})
// 加密类型
const passOptions = shallowRef([
  {
    configKey: 'RSA2',
    configValue: 'RSA2',
  },
  {
    configKey: 'MD5',
    configValue: 'MD5',
  },
])
// 类型
const typeOptions = shallowRef([
  {
    configKey: 1,
    configValue: '渠道',
  },
  {
    configKey: 2,
    configValue: '接口',
  },
])
// 模版类型
const moduleList = shallowRef([])
const formState = ref({
  id: null,
  appId: '',
  appRsaPriKey: '',
  appRsaPubKey: '',
  channelPubKey: '',
  appSecret: '',
  channelPartner: '',
  channelSubPartner: '',
  channelSubPartnerName: '',
  gateway: '',
  keyStore: '',
  rootCertificate: '',
  keyStorePassword: '',
  type: 1,
  signType: '',
})
const passState = ref({})
const addState = ref({})
const addrules = computed(() => {
  return {
    prefix1: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    suffix1: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    dtFormat1: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    random1: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],
    serverCode1: [
      { required: true, message: '必填字段', trigger: 'change' },
    ],

  }
})

const allocateInfo = reactive({
  userName: '',
  realName: '',
})
const message = useMessage()
const selectedRowKeys = shallowRef([])
const roleData = shallowRef([])
const columns = shallowRef([
  {
    title: 'AppId',
    dataIndex: 'appId',
    width: 180,
  },
  {
    title: '渠道',
    dataIndex: 'channel',
    width: 180,
  },
  {
    title: '渠道名称',
    dataIndex: 'channelName',
    width: 150,
    customRender: ({ text }) => {
      if (text) {
        return text
      }
      else {
        return '--'
      }
    },
  },
  {
    title: '商户类型',
    dataIndex: 'merchantType',
    width: 150,
    customRender: ({ text }) => {
      if (text === '0') {
        return '普通商户'
      }
      else {
        return '服务商'
      }
    },
  },
  {
    title: '渠道商户号',
    dataIndex: 'channelPartner',
    width: 170,
    customRender: ({ text }) => {
      if (text) {
        return text
      }
      else {
        return '--'
      }
    },
  },
  {
    title: '渠道AppId',
    dataIndex: 'channelAppId',
    width: 190,
  },

  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    width: 180,

  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: 'right',
    width: 120,

  },
])
const ruleColumns = shallowRef([

  {
    title: '前缀',
    dataIndex: 'prefix',
    width: 80,

  },
  {
    title: '后缀',
    dataIndex: 'suffix',
    width: 65,

  },
  {
    title: '日期格式',
    dataIndex: 'dtFormat',
    width: 120,

  },
  {
    title: '随机数',
    dataIndex: 'random',

  },
  {
    title: '服务器编码',
    dataIndex: 'serverCode',
    width: 110,

  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    width: 120,

  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: 'right',
    width: 80,

  },
])
const detailColumns = shallowRef([
  {
    title: 'AppId',
    dataIndex: 'appId',
  },
  {
    title: '渠道',
    dataIndex: 'channel',
  },
  {
    title: '前缀',
    dataIndex: 'prefix',
    width: 150,

  },
  {
    title: '后缀',
    dataIndex: 'suffix',

  },
  {
    title: '日期格式',
    dataIndex: '日期格式',

  },
  {
    title: '随机数',
    dataIndex: 'random',

  },
  {
    title: '服务器编码',
    dataIndex: 'serverCode',

  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',

  },
])
const loading = shallowRef(false)
const totalNum = shallowRef(0)
const pagination = reactive({
  pageSize: 8,
  pageSizeOptions: ['10', '20', '30', '40'],
  current: 1,
  total: totalNum,
  showSizeChanger: true,
  // showQuickJumper: true,
  showTotal: total => `总共：${total}`,
  onChange(current, pageSize) {
    pagination.pageSize = pageSize
    pagination.current = current
    init()
  },
})
const dataSource = shallowRef([])
const ruleData = shallowRef([])
const formModel = reactive({
  name: void 0,
})
const tableSize = ref(['large'])
const open = ref(false)
const options = computed(() => {
  return columns.value.map((item) => {
    if (item.dataIndex === 'action') {
      return {
        label: item.title,
        value: item.dataIndex,
        disabled: true,
      }
    }
    return {
      label: item.title,
      value: item.dataIndex,
    }
  })
})
const dropdownVisible = ref(false)
const getCheckList = computed(() => columns.value.map(item => item.dataIndex))
const state = reactive({
  indeterminate: false,
  checkAll: true,
  checkList: getCheckList.value,
})
onMounted(() => {
  init()
  getModule()
})
// 处理状态
function handleStatus(text) {
  switch (text) {
    case 'ACTIVE':
      return '正常'
    case 'INACTIVE':
      return '停用'
    default:
      return '锁定'
  }
}
// 获取模版列表
async function getModule() {
  try {
    const { data } = await getModuleList({
      param: {},
      page: {},
    })

    moduleList.value = data.results ?? []
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}
// 搜索
async function init() {
  if (loading.value)
    return
  loading.value = true
  try {
    const { data } = await getMobileList({
      param: { ...formModel },
      page: {
        currentPage: pagination.current,
        pageSize: pagination.pageSize,
      },

    })

    dataSource.value = data.data ?? []
    totalNum.value = data.pageInfo.total
  }
  catch (e) {
    console.log(e)
  }
  finally {
    loading.value = false
  }
}
async function onSearch() {
  pagination.current = 1
  await init()
}
async function onReset() {
  formModel.name = void 0
  formModel.desc = void 0
  await init()
}

// 选择加密类型
function handleSelect(value) {
  chooseItem.value = value
  if (chooseItem.value === 'MD5') {
    passState.value.rsaPrivateKey = ''
    passState.value.rsaPublicKey = ''
  }
  else {
    passState.value.md5Key = ''
  }
}
// 复制详情
async function handleCopyDetail(text) {
  try {
    await toClipboard(text)
    message.success('复制成功')
  }
  catch (e) {
    console.error(e)
    message.error('复制失败') // 如果出现错误，显示错误消息
  }
}
// 删除渠道
async function handleDelete(record) {
  Modal.confirm({
    title: '确认操作',
    content: `确定要删除该渠道吗？`,
    okText: '确认',
    centered: true,
    cancelText: '取消',
    onOk() {
      return new Promise((resolve, reject) => {
        const res = deleteMobile(record.id)
          .then((res) => {
            if (res.data.code === 'SUCCESS') {
              message.success('操作成功')
              init()
              resolve() // 关闭对话框
            }
            else {
              message.error('操作失败')
              reject() // 保持对话框打开
            }
          })
          .catch(() => {
            // message.error('操作失败')
            reject() // 保持对话框打开
          })
      })
    },
    onCancel() {
      console.log('取消操作')
    },
  })
}
// 关闭配置订单规则
async function onCloseRule() {
  ruleOpen.value = false
}
// 配置订单规则
function handleRule(record) {
  addDetail.value = record
  getRule()
}
// 查询订单规则
async function getRule() {
  try {
    const { data } = await getMobileRule({ id: addDetail.value.id })
    ruleData.value = data ?? []
    ruleOpen.value = true
  }
  catch (e) {
    console.log(e)
  }
  finally {
    allocateLoading.value = false
  }
}
// 新增订单规则
function addRules() {
  addOpen.value = true
  addState.value = {}
}
// 确认新增订单规则
async function handleRuleOk() {
  try {
    await addForm.value.validate()
    confirmLoading.value = true
    addState.value.appId = addDetail.value.appId
    addState.value.channel = addDetail.value.channel
    const { data } = await addMobileRule(addState.value)
    if (data.code === 'SUCCESS') {
      addOpen.value = false
      confirmLoading.value = false
      notification.success({
        message: '新增成功',
        duration: 1,
      })
      getRule()
    }
  }
  catch (error) {
    confirmLoading.value = false
    // message.error('请检查表单填写是否正确')
  }
}
// 删除订单规则
async function deleteRules(record) {
  Modal.confirm({
    title: '确认操作',
    content: `确定要删除该订单规则吗？`,
    okText: '确认',
    centered: true,
    cancelText: '取消',
    onOk() {
      return new Promise((resolve, reject) => {
        const res = deleteMobileRule(record.id)
          .then((res) => {
            if (res.data.code === 'SUCCESS') {
              notification.success({
                message: '操作成功',
                duration: 1,
              })
              getRule()
              resolve() // 关闭对话框
            }
            else {
              notification.error({
                message: '操作失败',
                duration: 1,
              })
              reject() // 保持对话框打开
            }
          })
          .catch(() => {
            // message.error('操作失败')
            reject() // 保持对话框打开
          })
      })
    },
    onCancel() {
      console.log('取消操作')
    },
  })
}

// 确认配置渠道
async function handleConfirm(record) {
  try {
    const { data } = await savePass(passState.value)
    message.success('配置成功')
    init()
    ruleOpen.value = false
  }
  catch (e) {
    console.log(e)
  }
  finally {
    allocateLoading.value = false
  }
}

function onSelectChange(value) {
  console.log('selectedRowKeys changed: ', value)
  selectedRowKeys.value = value
}
// 新增返回列表
function handleReturn() {
  channelOpen.value = false
}
// 详情返回列表
function handleReturnDetail() {
  detailOpen.value = false
}
// 打开新增渠道弹窗
function addUserModal() {
  if (channelForm.value) {
    channelForm.value.resetFields()
  }
  resetChannel()
  userTitle.value = '新增移动支付渠道配置'
  channelOpen.value = true
}
// 重置渠道信息
function resetChannel() {
  formState.value = {}
  formState.value.type = 1
}
// 复制渠道
async function handleCopy(record) {
  Modal.confirm({
    title: '确认操作',
    content: `确定要复制该渠道吗？`,
    okText: '确认',
    centered: true,
    cancelText: '取消',
    onOk() {
      return new Promise((resolve, reject) => {
        const res = copyMobile(record.id)
          .then((res) => {
            if (res.data.code === 'SUCCESS') {
              message.success('复制成功')
              init()
              resolve() // 关闭对话框
            }
            else {
              message.error('复制失败')
              reject() // 保持对话框打开
            }
          })
          .catch(() => {
            // message.error('操作失败')
            reject() // 保持对话框打开
          })
      })
    },
    onCancel() {
      console.log('取消操作')
    },
  })
}
// 确认新增渠道
async function handleOk() {
  try {
    await channelForm.value.validate()
    confirmLoading.value = true
    if (formState.value.id) {
      console.log(9999, formState.value)
      const { data } = await editMobile(formState.value)
      if (data.code === 'SUCCESS') {
        channelOpen.value = false
        confirmLoading.value = false
        message.success('保存成功')
        init()
      }
    }
    else {
      const { data } = await addMobile(formState.value)
      if (data.code === 'SUCCESS') {
        channelOpen.value = false
        confirmLoading.value = false
        message.success('新增成功')
        init()
      }
    }
  }
  catch (error) {
    confirmLoading.value = false
    // message.error('请检查表单填写是否正确')
  }
}
// 查看详情
async function handleView(record) {
  loading.value = true
  try {
    const res = await getMobileDetail(record?.id)
    detailOpen.value = true
    detailInfo.value = res.data

    loading.value = false
  }
  catch (e) {
    console.log(e)
    loading.value = false
  }
  finally {
    loading.value = false
  }
}
// 编辑渠道
async function handleEdit(record) {
  channelOpen.value = true
  formState.value = record
  // console.log(99999, formState.value)
  userTitle.value = '编辑移动支付渠道配置'
}
function handleSizeChange(e) {
  tableSize.value[0] = e.key
}
function filterAction(value) {
  return columns.value.filter((item) => {
    if (value.includes(item.dataIndex))
      return true

    return false
  })
}
const filterColumns = ref(filterAction(getCheckList.value))
function handleCheckAllChange(e) {
  Object.assign(state, {
    checkList: e.target.checked ? getCheckList.value : [],
    indeterminate: true,
  })
  filterColumns.value = e.target.checked ? filterAction(getCheckList.value) : filterColumns.value.filter(item => item.dataIndex === 'action')
}
watch(
  () => state.checkList,
  (val) => {
    state.indeterminate = !!val.length && val.length < getCheckList.value.length
    state.checkAll = val.length === getCheckList.value.length
  },
)
function handleResetChange() {
  state.checkList = getCheckList.value
  filterColumns.value = filterAction(getCheckList.value)
}
function handleCheckChange(value) {
  const filterValue = filterAction(value)
  filterColumns.value = filterValue
}
const expand = ref(false)
</script>

<template>
  <page-container>
    <a-card mb-4>
      <a-form :model="formModel" layout="inline">
        <a-col :span="8">
          <a-form-item name="appId" label="AppId">
            <a-input v-model:value="formModel.appId" placeholder="精确查询" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item name="channel" label="渠道">
            <a-input v-model:value="formModel.channel" placeholder="请输入渠道" allow-clear />
          </a-form-item>
        </a-col>
        <a-form-item>
          <a-space flex justify-end w-full>
            <a-button type="primary" @click="onSearch">
              <SearchOutlined />查询
            </a-button>
            <a-button type="primary" class="ml-2" ghost @click="addUserModal">
              <PlusOutlined />新增
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card>
      <a-table bordered :loading="loading" :columns="filterColumns" :scroll="{ x: 1000 }" :data-source="dataSource" :pagination="pagination">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'balance'">
            <span :style="{ color: record.balance < 0 ? 'red' : 'black' }">{{ Number(record.balance).toFixed(2) }}</span>
          </template>

          <template v-else-if="column.dataIndex === 'status'">
            <!-- <a-switch v-model:checked="record.status" /> -->
            <a-tag
              :color="record.status === 'ACTIVE' ? 'geekblue' : (record.status === 'INACTIVE' ? 'red' : 'volcano')"
            >
              {{ handleStatus(record.status) }}
            </a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'certNo'">
            {{ handleCertcard(record.certNo) }}
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-dropdown>
              <a class="ant-dropdown-link" style="border-radius:3px;padding:5px 10px;color:#344563;background-color: rgba(9, 30, 66, .08);" @click.prevent>
                操作 <CaretDownFilled style="font-size: 11px;margin-left: 5px;" />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="handleView(record)">
                    查看详情
                  </a-menu-item>
                  <a-menu-item @click="handleRule(record)">
                    配置订单规则
                  </a-menu-item>
                  <a-divider />
                  <a-menu-item @click="handleEdit(record)">
                    编辑
                  </a-menu-item>
                  <a-menu-item @click="handleCopy(record)">
                    复制
                  </a-menu-item>
                  <a-menu-item @click="handleDelete(record)">
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </template>
      </a-table>
    </a-card>
    <!-- 新增渠道 -->
    <a-drawer width="1000" placement="right" :title="userTitle" :closable="false" :open="channelOpen" @close="handleReturn">
      <template #extra>
        <a-button style="margin-right: 8px" @click="handleReturn">
          取消
        </a-button>
        <a-button type="primary" @click="handleOk">
          保存
        </a-button>
      </template>

      <a-form
        ref="channelForm"
        :model="formState"
        :rules="rules"
        layout="horizontal"
        name="basic"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="appId" label="AppId">
              <a-input v-model:value="formState.appId" placeholder="请填写AppId" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="channel" label="渠道">
              <a-input v-model:value="formState.channel" placeholder="请填写渠道" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="channelName" label="渠道名称">
              <a-input v-model:value="formState.channelName" placeholder="请填写渠道名称" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="channelAppId" label="渠道AppId">
              <a-input v-model:value="formState.channelAppId" placeholder="请填写渠道AppId" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="channelSubAppId" label="渠道子商户appId">
              <a-input v-model:value="formState.channelSubAppId" placeholder="请填写渠道子商户appId" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="channelPartner" label="渠道商户号">
              <a-input v-model:value="formState.channelPartner" placeholder="请填写渠道商户号" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="channelPartnerName" label="渠道商户名称">
              <a-input v-model:value="formState.channelPartnerName" placeholder="请填写渠道商户名称" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="channelSubPartner" label="渠道子商户号">
              <a-input v-model:value="formState.channelSubPartner" placeholder="请填写渠道子商户号" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="channelVersion" label="渠道版本号">
              <a-input v-model:value="formState.channelVersion" placeholder="请填写渠道版本号" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="channelExtra" label="渠道附加信息">
              <a-input v-model:value="formState.channelExtra" placeholder="请填写渠道附加信息" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="channelPartnerAddress" label="渠道商户地址">
              <a-input v-model:value="formState.channelPartnerAddress" placeholder="请填写渠道商户地址" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="sourceType" label="sourceType">
              <a-input v-model:value="formState.sourceType" placeholder="请填写sourceType" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="merchantType" label="商户类型">
              <a-radio-group v-model:value="formState.merchantType">
                <a-radio value="0">
                  普通商户
                </a-radio>
                <a-radio value="1">
                  服务商
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="channelOrgCode" label="channelOrgCode">
              <a-input v-model:value="formState.channelOrgCode" placeholder="请填写channelOrgCode" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="signType" label="加密类型">
              <a-select v-model:value="formState.signType" placeholder="请选择加密类型" allow-clear>
                <a-select-option v-for="item in passOptions" :key="item.configKey" :value="item.configKey">
                  {{ item.configValue }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="channelOrgCode" label="机构编号">
              <a-input v-model:value="formState.channelOrgCode" placeholder="请填写机构编号" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="providerId" label="providerId">
              <a-input v-model:value="formState.providerId" placeholder="请填写providerId" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="posId" label="posId">
              <a-input v-model:value="formState.posId" placeholder="请填写posId" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="branchId" label="branchId">
              <a-input v-model:value="formState.branchId" placeholder="请填写branchId" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="curCode" label="curCode">
              <a-input v-model:value="formState.curCode" placeholder="请填写curCode" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="rootCertificate" label="root证书">
              <a-textarea v-model:value="formState.rootCertificate" placeholder="请填写rootCertificate" :rows="4" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="channelCertificate" label="渠道证书">
              <a-textarea v-model:value="formState.channelCertificate" placeholder="请填写渠道证书" :rows="4" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="channelPubKey" label="渠道公钥">
              <a-textarea v-model:value="formState.channelPubKey" placeholder="请填写渠道公钥" :rows="4" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="appSecret" label="appSecret">
              <a-textarea v-model:value="formState.appSecret" placeholder="请填写appSecret" :rows="4" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="appRsaPriKey" label="rsa私钥">
              <a-textarea v-model:value="formState.appRsaPriKey" placeholder="请填写rsa私钥" :rows="4" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="appRsaPubKey" label="rsa公钥">
              <a-textarea v-model:value="formState.appRsaPubKey" placeholder="请填写rsa公钥" :rows="4" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="md5Key" label="md5Key">
              <a-textarea v-model:value="formState.md5Key" placeholder="请填写md5Key" :rows="4" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="gateway" label="网关地址">
              <a-textarea v-model:value="formState.gateway" placeholder="请填写网关地址" :rows="4" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="apiCode" label="apiCode">
              <a-input v-model:value="formState.apiCode" placeholder="请填写apiCode" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="platformFlag" label="支付台标识">
              <a-input v-model:value="formState.platformFlag" placeholder="请填写支付台标识" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="businessType" label="businessType">
              <a-input v-model:value="formState.businessType" placeholder="请填写businessType" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="businessCode" label="businessCode">
              <a-input v-model:value="formState.businessCode" placeholder="请填写businessCode" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="ftpIp" label="ftp地址">
              <a-input v-model:value="formState.ftpIp" placeholder="请填写ftp地址" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="ftpPort" label="ftp端口">
              <a-input v-model:value="formState.ftpPort" placeholder="请填写ftp端口" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item name="ftpUser" label="ftp用户名">
              <a-input v-model:value="formState.ftpUser" placeholder="请填写ftp用户名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item name="ftpPassword" label="ftp密码">
              <a-input v-model:value="formState.ftpPassword" placeholder="请填写ftp密码" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-drawer>
    <!-- 配置订单规则 -->
    <a-drawer width="700" placement="right" :closable="true" title="配置订单规则" :open="ruleOpen" @close="onCloseRule">
      <template #extra>
        <a-button type="primary" @click="addRules">
          <PlusOutlined />新增
        </a-button>
      </template>
      <a-table bordered :loading="loading" :columns="ruleColumns" :scroll="{ x: 600 }" :data-source="ruleData" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <a-space :size="8">
              <a-button type="link" color="red" @click="deleteRules(record)">
                <DeleteOutlined />
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-drawer>
    <!-- 新增订单规则 -->
    <a-modal v-model:open="addOpen" width="700px" title="新增订单规则" :mask-closable="false" :body-style="{ paddingTop: '30px', paddingBottom: '30px' }" ok-text="保存" @ok="handleRuleOk" @cancel="cancelRule">
      <a-form
        ref="addForm"
        :model="addState"
        :rules="addrules"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          label="前缀"
          name="prefix"
          help="前缀长度不能超过6位"
        >
          <a-input v-model:value="addState.prefix" placeholder="请填写前缀" max="6" />
        </a-form-item>
        <a-form-item
          label="后缀"
          name="suffix"
          help="后缀长度不能超过2位"
        >
          <a-input v-model:value="addState.suffix" placeholder="请填写后缀" max="2" />
        </a-form-item>
        <a-form-item
          label="日期格式"
          name="dtFormat"
          help="例如: yyyyMMddHHmmssSSS"
        >
          <a-input v-model:value="addState.dtFormat" placeholder="请填写日期格式" />
        </a-form-item>
        <a-form-item
          label="随机数"
          name="random"
        >
          <a-input v-model:value="addState.random" placeholder="请填写随机数" type="number" />
        </a-form-item>
        <a-form-item
          label="服务器编码"
          name="serverCode"
          help="服务器编码长度不能超过2位"
        >
          <a-input v-model:value="addState.serverCode" placeholder="请填写服务器编码" max="2" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 渠道详情 -->
    <a-drawer width="1000" placement="right" :closable="true" :open="detailOpen" title="渠道详情" @close="handleReturnDetail">
      <a-descriptions class="pl-4" title="渠道信息">
        <a-descriptions-item label="AppId">
          {{ detailInfo.appId }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道">
          {{ detailInfo.channel ? detailInfo.channel : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道名称">
          {{ detailInfo.channelName ? detailInfo.channelName : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道AppId">
          {{ detailInfo.channelAppId ? detailInfo.channelAppId : "--" }}
        </a-descriptions-item>

        <a-descriptions-item label="渠道商户号">
          {{ detailInfo.channelPartner ? detailInfo.channelPartner : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道商户名称">
          {{ detailInfo.channelPartnerName ? detailInfo.channelPartnerName : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道子商户号">
          {{ detailInfo.channelSubPartner ? detailInfo.channelSubPartner : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道版本号">
          {{ detailInfo.channelVersion ? detailInfo.channelVersion : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道附加信息">
          {{ detailInfo.channelExtra ? detailInfo.channelExtra : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道商户地址">
          {{ detailInfo.channelPartnerAddress ? detailInfo.channelPartnerAddress : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="sourceType">
          {{ detailInfo.sourceType ? detailInfo.sourceType : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="商户类型">
          {{ detailInfo.merchantType === '0' ? '普通商户' : "服务商" }}
        </a-descriptions-item>
        <a-descriptions-item label="机构编号">
          {{ detailInfo.channelOrgCode ? detailInfo.channelOrgCode : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="加密类型">
          {{ detailInfo.signType ? detailInfo.signType : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="providerId">
          {{ detailInfo.providerId ? detailInfo.providerId : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="posId">
          {{ detailInfo.posId ? detailInfo.posId : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="branchId">
          {{ detailInfo.branchId ? detailInfo.branchId : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="curCode">
          {{ detailInfo.curCode ? detailInfo.curCode : "--" }}
        </a-descriptions-item>

        <a-descriptions-item label="root证书">
          <a-popover title="root证书">
            <template #content>
              <a-textarea v-model:value="detailInfo.rootCertificate" style="width:700px;" placeholder="请输入keyStore" :rows="6" />
              <div class="mt-4 mb-2">
                <a-button @click="handleCopyDetail(detailInfo.rootCertificate)">
                  <CopyOutlined />复制
                </a-button>
              </div>
            </template>
            <a-button v-if="detailInfo.rootCertificate" type="link" style="color:#3c8dbc">
              查看
            </a-button>
            <div v-else>
              --
            </div>
          </a-popover>
        </a-descriptions-item>
        <a-descriptions-item label="渠道证书">
          <a-popover title="渠道证书">
            <template #content>
              <a-textarea v-model:value="detailInfo.channelCertificate" style="width:700px;" placeholder="请输入keyStore" :rows="6" />
              <div class="mt-4 mb-2">
                <a-button @click="handleCopyDetail(detailInfo.channelCertificate)">
                  <CopyOutlined />复制
                </a-button>
              </div>
            </template>
            <a-button v-if="detailInfo.channelCertificate" type="link" style="color:#3c8dbc">
              查看
            </a-button>
            <div v-else>
              --
            </div>
          </a-popover>
        </a-descriptions-item>
        <a-descriptions-item label="appSecret">
          <a-popover title="appSecret">
            <template #content>
              <a-textarea v-model:value="detailInfo.appSecret" style="width:700px;" placeholder="请输入keyStore" :rows="6" />
              <div class="mt-4 mb-2" @click="handleCopyDetail(detailInfo.appSecret)">
                <a-button><CopyOutlined />复制</a-button>
              </div>
            </template>
            <a-button v-if="detailInfo.appSecret" type="link" style="color:#3c8dbc">
              查看
            </a-button>
            <div v-else>
              --
            </div>
          </a-popover>
        </a-descriptions-item>
        <a-descriptions-item label="app私钥">
          <a-popover title="app私钥">
            <template #content>
              <a-textarea v-model:value="detailInfo.appRsaPriKey" style="width:700px;" placeholder="请输入keyStore" :rows="6" />
              <div class="mt-4 mb-2" @click="handleCopyDetail(detailInfo.appRsaPriKey)">
                <a-button><CopyOutlined />复制</a-button>
              </div>
            </template>
            <a-button v-if="detailInfo.appRsaPriKey" type="link" style="color:#3c8dbc">
              查看
            </a-button>
            <div v-else>
              --
            </div>
          </a-popover>
        </a-descriptions-item>
        <a-descriptions-item label="app公钥">
          <a-popover title="app公钥">
            <template #content>
              <a-textarea v-model:value="detailInfo.appRsaPubKey" style="width:700px;" placeholder="请输入keyStore" :rows="6" />
              <div class="mt-4 mb-2" @click="handleCopyDetail(detailInfo.appRsaPubKey)">
                <a-button><CopyOutlined />复制</a-button>
              </div>
            </template>
            <a-button v-if="detailInfo.appRsaPubKey" type="link" style="color:#3c8dbc">
              查看
            </a-button>
            <div v-else>
              --
            </div>
          </a-popover>
        </a-descriptions-item>
        <a-descriptions-item label="渠道公钥">
          <a-popover title="渠道公钥">
            <template #content>
              <a-textarea v-model:value="detailInfo.channelPubKey" style="width:700px;" placeholder="请输入keyStore" :rows="6" />
              <div class="mt-4 mb-2" @click="handleCopyDetail(detailInfo.channelPubKey)">
                <a-button><CopyOutlined />复制</a-button>
              </div>
            </template>
            <a-button v-if="detailInfo.channelPubKey" type="link" style="color:#3c8dbc">
              查看
            </a-button>
            <div v-else>
              --
            </div>
          </a-popover>
        </a-descriptions-item>
        <a-descriptions-item label="md5Key">
          <a-popover title="md5Key">
            <template #content>
              <a-textarea v-model:value="detailInfo.md5Key" style="width:700px;" placeholder="请输入keyStore" :rows="6" />
              <div class="mt-4 mb-2" @click="handleCopyDetail(detailInfo.md5Key)">
                <a-button><CopyOutlined />复制</a-button>
              </div>
            </template>
            <a-button v-if="detailInfo.md5Key" type="link" style="color:#3c8dbc">
              查看
            </a-button>
            <div v-else>
              --
            </div>
          </a-popover>
        </a-descriptions-item>
        <a-descriptions-item label="网关地址">
          {{ detailInfo.gateway ? detailInfo.gateway : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="apiCode">
          {{ detailInfo.apiCode ? detailInfo.apiCode : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="支付台标识">
          {{ detailInfo.platformFlag ? detailInfo.platformFlag : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="businessType">
          {{ detailInfo.businessType ? detailInfo.businessType : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="businessCode">
          {{ detailInfo.businessCode ? detailInfo.businessCode : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="ftp地址">
          {{ detailInfo.ftpIp ? detailInfo.ftpIp : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="ftp端口">
          {{ detailInfo.ftpPort ? detailInfo.ftpPort : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="ftp用户名">
          {{ detailInfo.ftpUser ? detailInfo.ftpUser : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="ftp密码">
          {{ detailInfo.ftpPassword ? detailInfo.ftpPassword : "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ detailInfo.createTime ? detailInfo.createTime : "--" }}
        </a-descriptions-item>
      </a-descriptions>
      <a-divider />
      <a-descriptions v-if="detailInfo.noruleConfig" class="pl-4" title="订单规则">
        <a-descriptions-item label="AppId">
          {{ detailInfo.noruleConfig.appId }}
        </a-descriptions-item>
        <a-descriptions-item label="渠道">
          {{ detailInfo.noruleConfig.channel }}
        </a-descriptions-item>
        <a-descriptions-item label="前缀">
          {{ detailInfo.noruleConfig.prefix ? detailInfo.noruleConfig.prefix : '--' }}
        </a-descriptions-item>
        <a-descriptions-item label="后缀">
          {{ detailInfo.noruleConfig.suffix ? detailInfo.noruleConfig.suffix : '--' }}
        </a-descriptions-item>
        <a-descriptions-item label="日期格式">
          {{ detailInfo.noruleConfig.dtFormat }}
        </a-descriptions-item>
        <a-descriptions-item label="随机数">
          {{ detailInfo.noruleConfig.random }}
        </a-descriptions-item>
        <a-descriptions-item label="服务器编码">
          {{ detailInfo.noruleConfig.serverCode }}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions v-else class="pl-4" title="订单规则">
        <a-descriptions-item label="">
          暂无
        </a-descriptions-item>
      </a-descriptions>
    </a-drawer>
  </page-container>
</template>

  <style>
    .ant-descriptions .ant-descriptions-item-container .ant-descriptions-item-label{
      align-items: center !important;
    }
  </style>

  <style lang="less" scoped>
    .returnBack{
      position: absolute;
      top: 0px;
      left:0;
      background: #fff;
      width: 98.5%;
      z-index: 999;
      padding: 20px 20px 20px 30px;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
    }
    :deep(.ant-divider-horizontal){
      margin:5px 0;
    }
    :deep(.ant-btn){
       padding: 4px 8px;
    }
    .line{
      color:#1677ff;
    }
    .userTitle{
      color:gray;
      width: 100%;
      padding:5px 0;
      border-bottom:1px solid #f1eded;
      margin-bottom: 20px;
    }
    .red{
      color:red;
      /* color:#ff4d4f; */
    }
    .card-title{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      flex: auto;
      color: rgba(0, 0, 0, 0.88);
      font-weight: 600;
      font-size: 16px;
      line-height: 1.5;
    }
  @media screen and (max-width: 1200px) and (min-width: 992px) {
    .activeCard {
      margin-bottom: 24px;
    }
    .members {
      margin-bottom: 0;
    }
    .extraContent {
      margin-left: -44px;
      .statItem {
        padding: 0 16px;
      }
    }
  }

  @media screen and (max-width: 992px) {
    .activeCard {
      margin-bottom: 24px;
    }
    .members {
      margin-bottom: 0;
    }
    .extraContent {
      float: none;
      margin-right: 0;
      .statItem {
        padding: 0 16px;
        text-align: left;
        &::after {
          display: none;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .extraContent {
      margin-left: -16px;
    }
    .projectList {
      .projectGrid {
        width: 50%;
      }
    }
  }

  @media screen and (max-width: 576px) {
    .pageHeaderContent {
      display: block;
      .content {
        margin-left: 0;
      }
    }
    .extraContent {
      .statItem {
        float: none;
      }
    }
  }

  @media screen and (max-width: 480px) {
    .projectList {
      .projectGrid {
        width: 100%;
      }
    }
  }
  </style>
